<template>
  <div class="fourJiao all-height-width" id="fourJiaoBox">
    <!-- @click="playVideoFn();" -->
    <div id="circleCenter" class="fourJiao4 all-height-width"  >
      <img :src="pegSrc" height="100%" width="100%" alt="视频流未播放" v-if="props.imgFlag"/>
      <!-- <span :style="`left:${px}px;top:${py}px;`" v-show="props.isShowChecked" class="clCenter">+</span> -->
    </div>
    <div class="fourJiao1 all-height-width event-none"></div>
    <canvas
      v-show="props.isShowChecked"
      id="circle"
      ref="canvasEl"
      class="fourJiao2 all-height-width"
      :width="jiaowidth"
      :height="jiaoheight"
    ></canvas>
    <div class="c">
      <div class="jia all-height-width event-none">+</div>
      <div class="jia all-height-width event-none">+</div>
    </div>
  </div>
</template>

<script setup>
import {
  startVideo,
} from "../http/video";
import { onMounted, ref, nextTick, defineProps,onUnmounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const emit = defineEmits("changeImgFlag");
let jiaowidth = ref(0);
let jiaoheight = ref(0);
let widthC = ref();
let heightC = ref();
let canvasEl = ref();

const props = defineProps({
  isShowChecked: true,
  cx: 0,
  cy: 0,
  rx: 0,
  ry: 0,
  cx2: 0,
  cy2: 0,
  rx2: 0,
  ry2: 0,
  scaling_ratio:1,
  imgFlag: false
});

const px = ref(0);
const py = ref(0);

watch(
  () => props.cx,
  (val) => {
    if (val) {
      const ctx = canvasEl.value.getContext("2d");
      clearCanvas(ctx);
      let originalCenter = {
        x: 960,
        y: 540,
      };

      let newCenter = {
        x: jiaowidth.value / 2,
        y: jiaoheight.value / 2,
      };

      let n = newCenter.x / originalCenter.x;

      let points = getPointsByScreen(
        newCenter,
        originalCenter,
        {
          x: props.cx,
          y: props.cy,
        },
        n
      );

      let points2 = getPointsByScreen(
        newCenter,
        originalCenter,
        {
          x: props.cx2,
          y: props.cy2,
        },
        n
      );

      px.value = points.x;
      py.value = points.y;
      // 设置椭圆的样式
      ctx.lineWidth = 2;
      ctx.strokeStyle = "#6AFFB2";
      ctx.beginPath();
      ctx.ellipse(
        points.x,
        points.y,
        (props.rx / 2 * n)  * props.scaling_ratio,
        (props.ry / 2  * n)  * props.scaling_ratio,
        0,
        0,
        Math.PI * 2
      );

      ctx.beginPath();
      ctx.ellipse(
        points2.x,
        points2.y,
        (props.rx2 / 2 * n)  * props.scaling_ratio,
        (props.ry2 / 2  * n)  * props.scaling_ratio,
        0,
        0,
        Math.PI * 2
      );

      ctx.fillStyle = "#6AFFB2";
      // 绘制垂直线条
      ctx.fillRect(
        points.x, // x 坐标
        points.y - 4, // y 坐标
        2, // 宽度
        10 // 高度
      );

      // 绘制水平线条
      ctx.fillRect(
        points.x - 4, // x 坐标
        points.y, // y 坐标
        10, // 宽度
        2 // 高度
      );


      // 绘制垂直线条
      ctx.fillRect(
        points2.x, // x 坐标
        points2.y - 4, // y 坐标
        2, // 宽度
        10 // 高度
      );

      // 绘制水平线条
      ctx.fillRect(
        points2.x - 4, // x 坐标
        points2.y, // y 坐标
        10, // 宽度
        2 // 高度
      );
      ctx.stroke(); // 描边
    }
  },
  { deep: true, immediate: true }
);

function getPointsByScreen(newCenter, originalCenter, points, n) {
  let newX = newCenter.x + (points.x - originalCenter.x) * n;
  let newY = newCenter.y + (points.y - originalCenter.y) * n;

  return {
    x: newX,
    y: newY,
  };
}

const canvasSize = ref({ width: 0, height: 0 });
const pegSrc = ref(
  import.meta.env.VITE_APP_BASE_API + `api/video/stream.mjpeg?timestamp=${Date.now()}`
);
onMounted(() => {
  nextTick(() => {
    setTimeout( () => {
      setC();
    }, 1000)
      
  });
  
});
function clearCanvas(ctx) {
  if (canvasEl.value) {
    // if(!ctx){
    //    let ctx = canvasEl.value.getContext("2d");
    // }
    ctx.clearRect(0, 0, canvasEl.value.width, canvasEl.value.height);
  }
}
function _setC() {
  let options = {
    width: 13335,
    height: 12829,
    x: 300,
    y: 0,
    rx: 9601,
    ry: 9034,
  };
  fourHuaYuan(options);
}
// 四角画圆，炉子的长（左右），宽（前后）
function _fourHuaYuan(options) {
  const container = canvasEl.value.parentElement;
  canvasEl.value.width = parseDimension(
    `${jiaowidth.value}vw`,
    container.clientWidth
  ); // 设置宽度为500
  canvasEl.value.height = parseDimension(
    `${jiaoheight.value}vh`,
    container.clientHeight
  ); // 设置高度为300
  widthC.value = options.width / canvasEl.value.width;
  heightC.value = options.height / canvasEl.value.height;
  const ctx = canvasEl.value.getContext("2d");
  const a = options.rx / widthC.value;
  const b = options.rx / heightC.value;
  cx.value = options.x / widthC.value + canvasEl.value.width / 2;
  cy.value = options.y / heightC.value + canvasEl.value.height / 2;
  // 设置椭圆的样式
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#6AFFB2";
  // 绘制椭圆的方法
  function drawEllipse(ctx, x, y, radiusX, radiusY) {
    ctx.beginPath();
    ctx.ellipse(x, y, radiusX / 2, radiusY / 2, 0, 0, Math.PI * 2);
    ctx.stroke();
  }
  // 绘制椭圆
  drawEllipse(ctx, cx.value, cy.value, a, b);
}

function setC() {
  let boxW = document.getElementById("fourJiaoBox").offsetWidth;
  let boxH = (1080 * boxW) / 1920;

  jiaowidth.value = boxW;
  jiaoheight.value = boxH;
}
function fourHuaYuan() {}

const parseDimension = (value, max) => {
  if (value.endsWith("vw")) {
    return (parseFloat(value) / 100) * window.innerWidth;
  } else if (value.endsWith("vh")) {
    return (parseFloat(value) / 100) * window.innerHeight;
  } else if (value.endsWith("px")) {
    return parseFloat(value);
  }
  return max;
};
onUnmounted(() => {
  if (canvasEl.value) {
    const ctx = canvasEl.value.getContext("2d");
    ctx.clearRect(0, 0, canvasEl.value.width, canvasEl.value.height);
    // 释放资源
    canvasEl.value = null;
  }
});
const clearImgSrc = () =>{
  pegSrc.value = "";
  pegSrc.value = import.meta.env.VITE_APP_BASE_API + `api/video/stream.mjpeg?timestamp=${Date.now()}`
}
watch(() =>route.path,(oldVal,newVal) =>{
  if(oldVal){
    clearImgSrc()
  }
})
defineExpose({clearImgSrc})
</script>

<style lang="scss" scoped>
.all-height-width {
  width: 100%;
  height: 100%;
}
.fourJiao {
  width: 100%;
  .fourJiao1 {
    position: relative;
    top: 0;
    left: 0;
    border: 1px solid #947b7b;
  }
  .c{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .jia{
      width: 50%;
      flex-shrink: 0;
      color: red;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .fourJiao2,
  .fourJiao4 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
  }
  .fourJiao4 {
    img {
      object-fit: contain;
    }
  }
  .clCenter {
    color: #6affb2;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    left: calc(50% - 10px);
    top: calc(50% - 10px);
  }
}
</style>
<style>
.event-none{
  pointer-events: none;
}
</style>